{% extends 'base.html' %}
{% load staticfiles %}

{% block content %}
    {##}
    {#    学习参考1：<a href="https://www.cnblogs.com/laowangc/p/8875526.html">bootstrap-table学习参考</a>#}
    {#    学习参考2：<a href="https://www.cnblogs.com/SmallStrange/p/10643357.html">bootstrap-table学习参考</a>#}
    {#    学习参考2：<a href="https://blog.csdn.net/yapengliu/article/details/80191699">bootstrap-table学习参考</a>#}
    {#    学习参考2：<a href="https://www.jianshu.com/p/b9d0f0935263">bootstrap-table学习参考</a>#}
    <div id="tools"></div>

    <table class="table table-hover" style="table-layout: fixed;" id="table" data-toggle="table"></table>
    {#    <button class="btn btn-success">成功提示</button>#}
    {#    <button class="btn btn-danger">失败提示</button>#}
    {#    <button class="btn btn-warning">警告提示</button>#}
    {#    <button class="btn btn-info">信息提醒</button>#}

    <!-- 按钮触发模态框 -->
    <button hidden class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="goodbutton">
        开始演示模态框123312
    </button>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        修改标题
                    </h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="modal_id"/>
                    <input id="modal_input" class="form-control"/>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="clolsemodal">关闭
                    </button>

                    <button type="button" class="btn btn-primary" onclick='changeTitle()'>
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

{% endblock %}
{% block script %}
    <script type="text/javascript">
        {#$('.btn-success').on('click', function () {#}
        {#    $.message('成功');});#}
        {#$('.btn-danger').on('click', function () {#}
        {#    $.message({#}
        {#        message: '失败提示',#}
        {#        type: 'error'});});#}
        {#$('.btn-warning').on('click', function () {#}
        {#    $.message({#}
        {#        message: '警告提示',#}
        {#        type: 'warning'});});#}
        {#$('.btn-info').on('click', function () {#}
        {#    $.message({message: '信息提醒', type: 'info'});});#}


        $(function () {
            insertInput = $("<div class=\"input-group\"> <span  class=\"input-group-addon\">在此处编写新的标题到复用库:</span> <input  type=\"text\" id=\"insertInput\" class=\"form-control\" placeholder=\"请输入新标题\"> </div>");     // 创建的input对象
            insertButton = $("<input type=\"button\" value=\"加入标题到复用库\" class=\"form-control btn btn-success\" id=\"insertButton\" >");     // 创建的input对象
            pagetitle = $("<span style=\"text-align: center;display:block; font-size:25px\"  id=\"pagetitle\">复用库 <span><a href=\"{% url 'messageBox:myajax' %}\">进入主标题库</a></span></span>");
            $("#tools").append(pagetitle);                        // 将创建的input添加到相应的位置

            $("#tools").append(insertInput);                        // 将创建的input添加到相应的位置
            $("#tools").append(insertButton);                        // 将创建的input添加到相应的位置

            {#保存成复用库的文件标题，hanpost=2#}
            $("#insertButton").click(function () {

                $.ajax({
                type: "GET",
                url: '{% url 'messageBox:saveToutiao' %}',
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                data: "keyword=通用" + '&' + "title=" + $("#insertInput").val() + '&' + "hasPost=2",

                success: function (res) {
                    if (res.status === 'success') {
                        {#alert(res.status);#}
                        {# 刷新列表的方式有2中，第一种，ajax返回的res进行动态更新，这个不会闪屏   s#}
                        {# 刷新列表的方式有2中，第二种，table的refresh，等于重新刷新页面#}
                        $('#table').bootstrapTable('load', res.rows);
                        {#$('#table').bootstrapTable('refresh');#}
                        $.message({message: '添加成功',});

                    } else {
                        $.message({message: '添加失败，格式有误', type: 'info'})
                    }
                },

                error: function (error) {

                    console.log(error);
                }
            })

            });


        });




        $('#table').bootstrapTable({

            ajax: function (request) {                    //使用ajax请求
                $.ajax({
                    type: "GET",
                    url: '{% url 'messageBox:myajaxgetReuse' %}',
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    data: request.data,
                    success: function (res) {
                        request.success({
                            row: res
                        });
                        $('#table').bootstrapTable('load', res);
                        {#alert(JSON.stringify(res))#}
                    },
                    error: function (error) {
                        console.log(error);
                    }
                })
            },

            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            {#queryParams: 'queryParams',         //传递参数（*）#}
            sidePagination: "client",           //分页方式：client 客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            smartDisplay: false,
            search: false,                      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: false,                 //是否显示所有的列
            showRefresh: true,                 //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 540,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            rowStyle: function (row, index) {
                var style = "";
                style = 'danger';
                return {classes: style}
            },
            columns: [
                {field: 'id', title: 'ID', sortable: true, align: 'center', width: 20},
                {field: 'songname', title: '歌名', sortable: false, align: 'center', width: 60},

                {field: 'title', title: '标题', sortable: false, align: 'left', width: 120},


                {
                    field: 'caozuo2',
                    title: "修改内容",
                    align: 'center',
                    valign: 'middle',
                    width: 30, // 定义列的宽度，单位为像素px
                    formatter: function (value, row, index) {   //传入数据
                        {#alert(row.title);#}
                        {#alert(row.id);#}

                        return '<button class="btn btn-primary btn-sm" onclick="geimodal(\'' + row.id + '\',\'' + row.title + '\')">修改标题</button>';
                        {#return '<button class="btn btn-primary " data-toggle="modal" data-target="#myModal onclick="del(\'' + row + '\')">修改话题</button>';#}
                    }
                },
                {
                    field: 'caozuo1',
                    title: "定义垃圾标题",
                    align: 'center',
                    valign: 'middle',
                    width: 30, // 定义列的宽度，单位为像素px
                    formatter: function (value, row, index) {   //传入数据
                        return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.id + '\')">垃圾标题</button>';
                    }
                },
                {field: 'haspost', title: '是否发送', sortable: false, align: 'center', width: 20},

            ]

        });

        function geimodal(id, title) {
            {#修改模态框内容#}
            {#alert(id);#}
            {#alert(title);#}
            $("#goodbutton").click();
            $("#modal_input").attr("value", title);
            $("#modal_id").attr("value", id);


        }

        {#把post改成1，定义为垃圾标题#}

        function del(id) {
            $.ajax({
                type: "GET",
                url: '{% url 'messageBox:myajaxdel' %}',
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                data: "id=" + [parseInt(id)],
                success: function (res) {

                    {#成功删除#}

                    $.message({
                        message: '删除成功',
                    });

                    {#alert(JSON.stringify(res))#}
                },
                error: function (error) {
                    $.message({
                        message: '操作失败',
                        type: 'warning'
                    });
                    console.log(error);
                }
            });

            {#table 去掉这id行#}
            $('#table').bootstrapTable('remove', {
                field: "id",   //此处的 “id”对应的是字段名
                values: [parseInt(id)],
            });
        }

        {#修改标题部分#}
        function changeTitle() {
            title = $("#modal_input").val();
            id = $("#modal_id").val();
            {#alert(title);#}
            {#alert(id);#}
            $.ajax({
                type: "GET",
                url: '{% url 'messageBox:updataTitle' %}',
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                data: "id=" + id + '&' + "title=" + title,
                success: function (res) {

                    if (res.status === 'success') {

                        $.message({message: '修改成功',});
                        $('#clolsemodal').click();
                        {#$('#table').bootstrapTable('load', res.rows);#}
                        window.parent.location.reload(true);

                    } else {
                        $.message({message: '添加失败，数据重复', type: 'info'})
                    }




                },
                error: function (error) {
                    console.log(error);
                }
            })
        }

        {#把内容加入到复用库#}

        function setPostReuse(id) {

            $.ajax({
                type: "GET",
                url: '{% url 'messageBox:myajaxdelTo2' %}',
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                data: "id=" + [parseInt(id)],
                success: function (res) {

                    {#成功删除#}

                    $.message({message: '复用标题库',});

                    {#alert(JSON.stringify(res))#}
                },
                error: function (error) {
                    $.message({
                        message: '操作失败',
                        type: 'warning'
                    });
                    console.log(error);
                }
            });

            {#table 去掉这id行#}
            $('#table').bootstrapTable('remove', {
                field: "id",   //此处的 “id”对应的是字段名
                values: [parseInt(id)],
            });


        }


    </script>
{% endblock %}>